<template>
  <div id="app">
    <div class="codeinputarea">
      <PincodeInput
          ref="fillingpincode"
          v-model="code"
          placeholder="⭕️"
          :length="5"
          inputtype="referrer"
          @fillcomplete="(val)=>{messsage=`now finished ${val}`}"

      />
      <div class="monitor">
        <span class="monitor-label">Parent value:</span>
        <span v-text="code"/>
      </div>
      <div class="monitor">
        <span class="monitor-label">.</span>
        <span v-text="messsage"/>
      </div>
      <button
          class="reset-button"
          @click="reset">
        Reset
      </button>
      <button
          class="reset-button"
          @click="triError">
        Error
      </button>
    </div>
  </div>
</template>
<style lang="scss">
@import "../../src/presents/font";
@import "../../src/presents/funa";

#app {
  margin-top: 100px;
  text-align: center
}

.monitor {
  margin: 30px auto;
  font-size: 18px;
  font-family: Arial, sans-serif;
  opacity: 0.6;

  &-label {
    margin-right: 4px
  }
}

.reset-button {
  display: block;
  margin: 10px auto;
  border: none;
  border-radius: 3px;
  padding: 10px 30px;
  font-size: 18px;
  color: rgba(black, 0.8);
  transition: color 0.1s ease-in;

  &:hover,
  &:focus {
    cursor: pointer;
    color: rgba(black, 0.5)
  }
}

</style>

<script>
// import PincodeInput from "@/plugin/dist/PincodeInput.min"
import PincodeInput from "@/components/codepin/Component.vue"

export default {
  name: "App",
  components: {
    PincodeInput,
  },
  data: () => ({
    code: "",
    messsage: "",
    iserror: false,
  }),
  methods: {
    triError() {
      let t = this.$refs["fillingpincode"]
      this.iserror = !this.iserror
      t.setError(this.iserror)
    },
    reset() {
      let t = this.$refs["fillingpincode"]
      t.reset()
      //      this.code = ""
    },
  }
}
</script>
